<template>
  <div class="brand" mx-10 my-10>
    <box-skin
      class="brand__item"
      v-for="item in list"
      :key="item.id"
      bor-4
      pb-10
    >
      <img :src="item.image" alt="" />
      <p ellipsis-2 mb-5 style="text-indent: 1em" fz-14>
        {{ item.des }}
      </p>
      <div style="display: flex; align-items: center">
        <img
          :src="item.avatarImage"
          style="width: 30px; height: 30px"
          circle
          alt=""
          mx-4
        />
        <span ellipsis-1 fz-13>{{ item.avatarDes }}</span>
      </div>
    </box-skin>
  </div>
</template>

<script setup>
import BoxSkin from "@/components/box-skin/BoxSkin.vue";
defineProps(["list"]);
</script>

<style scoped lang="scss">
@include b(brand) {
  column-count: 2;
  column-gap: 10px;
  margin-bottom: 60px;
  @include e(item) {
    break-inside: avoid;
    margin-bottom: 10px;
    overflow: hidden;
  }
}
</style>
